<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<title>App</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/site.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript">
function UpLoadImage()
{
	var stylelist = $("#selectedstylelist li");
	if(stylelist.size() == 0)
	{
		alert("必须先选择样式！");
	}
	else if($("#ImageFile").val() == "")
	{
		alert("请选择文件！");
	}
	else
	{
		var styleliststr = "";
		$("#selectedstylelist li").each(function()
		{
			styleliststr += $(this).text() + ';';
		})
		var array = new Object();
		array.stylelist = styleliststr;
		$.ajaxFileUpload({
			url:"/TestTomcat/upload",
			secureuri:false,
			fileElementId:"ImageFile",
			dataType:'json',
			data:array,
			success:function(url)
			{
				$("#demoimage").attr("src",url);
			},
			error:function()
			{
				alert("bad");
			}
		});	
	}
	
}
</script>
</head>
<body>
<div id="maincontent">
	<div id="stylelist">
		<div class="styleItem">
		<canvas class="">Middle age</canvas>
		<p>Middle age</p>
		</div>
		<div class="styleItem">
		<canvas class="">Modern</canvas>
		<p>Modern</p>
		</div>
		<div class="styleItem">
		<canvas class="">Impressional</canvas>
		<p>印象风格</p>
		</div>
		<div class="styleItem">
		<canvas class="">Chinese</canvas>
		<p>Chinese</p>
		</div>
		<div style="clear:both"></div>
		<p>目前所选样式</p>
		<div id="selectedstylelist">
			<div style="clear:both"></div>
		</div>
	</div>

	<div id="actualcontent">
		<form action="/TestTomcat/upload" method="post" enctype="multipart/form-data">
		<input type="file" name="ImageFile" id="ImageFile" />
		<input type="submit" value="submit" />
		<input type="button" value="预览" onclick="javascript:UpLoadImage()" />
		</form>
		<div id="demo">
			<img id="demoimage" src="" alt="" />
		</div>
	</div>
	<div style="clear:both"></div>
</div>
<script type="text/javascript">
	
	$(".styleItem canvas").each(function(){
		var context = $(this)[0].getContext("2d");
		//context.save();
		context.font = "120px";
		context.fillStyle = "#fefefe";
		context.fillText("test",0,0);
		//context.restore();
	});
	$(".styleItem canvas").click(function()
	{
		var result = $(this).hasClass("selected")
		if(result)
		{
			$(this).removeClass("selected");
			var str = "#selectedstylelist li:contains('" + $(this).next('p').html() + "')";
			$(str).detach();
		}
		else
		{
			$(this).addClass("selected");
			var str = "<li>" + $(this).next('p').html() + "</li>";
			$("#selectedstylelist").prepend(str);
		}
		
	});
</script>
</body>
</html>